<template>
    <div>
        <head-top signin-up='msite'>
            <router-link :to="'/search/geohash'" class="link_search" slot="search">
                <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
                    <circle cx="8" cy="8" r="7" stroke="rgb(255,255,255)" stroke-width="1" fill="none"/>
                    <line x1="14" y1="14" x2="20" y2="20" style="stroke:rgb(255,255,255);stroke-width:2"/>
                </svg>
            </router-link>
            <router-link to="/home" slot="msite-title" class="msite_title">
                <span class="title_text ellipsis">{{msiteTitle}}</span>
            </router-link>
        </head-top>
        <nav class="msite_nav ">
            <div class="swiper-container " v-if="goodTypes.length">
                <div class="swiper-wrapper">
                    <div class="swiper-slide good_types_container">
                        <div class="link_to_good" v-for="(item, index) in goodTypes" :key="index">
                            <figure>
                                <img :src="item.image">
                                <figcaption>{{item.name}}</figcaption>
                            </figure>
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <img src="../../images/fl.svg" class="fl_back animation_opactiy" v-else>
        </nav>
        <div class="good_list_container ">
            <header class="good_header ">
                <svg class="good_icon">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#good"></use>
                </svg>
                <span class="good_header_title">新鲜</span>
            </header>
            <good-list v-if="hasGetData" :geohash="geohash"></good-list>
        </div>
        <foot-guide></foot-guide>
    </div>
</template>

<script>
    import {mapMutations} from 'vuex'
    // import {imgBaseUrl} from 'src/config/env'
    import headTop from 'src/components/header/head'
    import footGuide from 'src/components/footer/footGuide'
    import goodList from 'src/components/common/goodlist'
    import {msiteAddress, msitegoodTypes, cityGuess} from 'src/service/getData'
    import 'src/plugins/swiper.min.js'
    import 'src/style/swiper.min.css'

    export default {
        data() {
            return {
                geohash: '', // city页面传递过来的地址geohash
                msiteTitle: '请选择地址...', // msite页面头部标题
                goodTypes: [], // 食品分类列表
                hasGetData: true, //是否已经获取地理位置数据，成功之后再获取商铺列表信息
                imgBaseUrl: 'https://fuss10.elemecdn.com', //图片域名地址
            }
        },
        async beforeMount() {
            this.hasGetData = true;
        },
        mounted() {
            //获取导航商品类型列表
            msitegoodTypes().then(res => {
                let resArr = [...res]; // 返回一个新的数组
                console.log(resArr)
                this.goodTypes = resArr;
            }).then(() => {
                //初始化swiper
                new Swiper('.swiper-container', {
                    pagination: '.swiper-pagination',
                    loop: true
                });
            })
        },
        components: {
            headTop,
            goodList,
            footGuide,
        },
        computed: {},
        methods: {
            ...mapMutations([
                'RECORD_ADDRESS', 'SAVE_GEOHASH'
            ]),
        },
        watch: {}
    }

</script>

<style lang="scss" scoped>
    @import 'src/style/mixin';

    .link_search {
        left: .8rem;
        @include wh(.9rem, .9rem);
        @include ct;
    }

    .msite_title {
        @include center;
        width: 50%;
        color: #fff;
        text-align: center;
        margin-left: -0.5rem;

        .title_text {
            @include sc(0.8rem, #fff);
            text-align: center;
            display: block;
        }

        border-radius: 0.2em;
    }

    .msite_nav {
        //padding-top: 2.1rem;
        margin-top: 2.2em;
        margin-left: 0.2em;
        margin-right: 0.2em;
        background-color: #fff;
        border-bottom: 0.025rem solid $bc;
        height: 7.6rem;
        overflow: hidden;
        border-radius: 0.2em;

        .swiper-container {
            @include wh(100%, auto);
            padding-bottom: 0.6rem;

            .swiper-pagination {
                bottom: 0.2rem;
            }
        }

        .fl_back {
            @include wh(100%, 100%);
        }
    }

    .good_types_container {
        display: flex;
        flex-wrap: wrap;

        .link_to_good {
            width: 25%;
            padding: 0.3rem 0rem;
            @include fj(center);

            figure {
                img {
                    margin-bottom: 0.3rem;
                    @include wh(1.8rem, 1.8rem);
                }

                figcaption {
                    text-align: center;
                    @include sc(0.55rem, #666);
                }
            }
        }
    }

    .good_list_container {
        margin-top: .4rem;
        border-top: 0.025rem solid $bc;
        background-color: #f5f5f5;
        //margin-right: 0.2em;
        //margin-left: 0.2em;
        overflow: hidden;

        .good_header {
            border-radius: 0.2em;
            background-color: #f5f5f5;

            .good_icon {
                fill: #999;
                margin-left: 0.6rem;
                vertical-align: middle;
                @include wh(0.6rem, 0.6rem);
            }

            .good_header_title {
                color: #999;
                @include font(0.55rem, 1.6rem);
            }
        }
    }

</style>
